<!DOCTYPE html>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

<html lang="zh-CN">

<head>
<meta charset="utf-8">
    <title>三3三博客社区</title>
    <link rel="icon" href="../../images/icon.jpg" sizes="32x32">
<link rel="stylesheet" href="../assets/css/style.css">
</head>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>

<body>
    <div class="content">
        <div class="form sign-in">
            <h2>欢迎来到三3三的family</h2>
            <label>
                <span>用户名</span>
                <input type="username" name="username" />
            </label>
            <label>
                <span>密码</span>
                <input type="password" name="password" />
            </label>
            <button type="button" class="forgot-pass" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">忘记密码？</button>
            <button type="button" class="submit" onclick="login2()">登 录</button>
            <button type="button" class="fb-btn">使用 <span>facebook</span> 帐号登录</button>
        </div>
        <div class="sub-cont">
            <div class="img">
                <div class="img__text m--up">
                    <h2>还未注册？</h2>
                    <p>立即注册，加入我的family！</p>
                </div>
                <div class="img__text m--in">
                    <h2>已有帐号？</h2>
                    <p>有帐号就登录吧，好久不见了！</p>
                </div>
                <div class="img__btn">
                    <span class="m--up">注 册</span>
                    <span class="m--in">登 录</span>
                </div>
            </div>
            <div class="form sign-up">
                <h2>立即注册</h2>
                <label>
<!--                    <span>用户名</span>-->
                    <input type="text" name="username2" placeholder="请输入用户名"/>
                    <input type="text" name="name" placeholder="请输入昵称">
                </label>
                <label>
                    <span>邮箱</span>
                    <input type="email" placeholder="请输入邮箱" name="email"/>
                </label>
                <label>
                    <span>手机号</span>
                    <input type="phone" name="phone" placeholder="请输入手机号" id="phone2"/>
                    <div class="input-group mb-3">
                        <input id="vscode" type="text" class="form-control" placeholder="" aria-label="Recipient's username" aria-describedby="button-addon2">
                        <div class="input-group-append" style="width: 120px;padding-top: 6px">
                            <button class="btn btn-outline-secondary" type="button" onclick="getCode2()">获取验证码</button>
                        </div>
                    </div>
                </label>
                <label>
                    <span>密码</span>
                    <input type="password" name="password2"/>
                </label>
                <button type="button" class="submit" onclick="register()">注 册</button>
            </div>
        </div>
    </div>

    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">密码找回</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form>
                        <div class="form-group">
                            <label for="recipient-name" class="col-form-label">请输入用户名</label>
                            <input type="text" class="form-control" id="username">
                        </div>
                        <div class="form-group">
                            <label for="recipient-name" class="col-form-label">请输入账号绑定的手机号</label>
                            <input type="text" class="form-control" id="recipient-name">
                        </div>
                        <div class="input-group mb-3">
                            <input type="text" class="form-control" id="code" placeholder="请输入验证码" aria-describedby="button-addon2">
                            <div class="input-group-append" style="padding-top: 6px;width: 200px">
                                <button class="btn btn-outline-secondary" type="button" id="button-addon2" onclick="getCode()" >获取验证码</button>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" onclick="findPwd()">找回密码</button>
                </div>
            </div>
        </div>
    </div>

    <script src="../assets/js/script.js"></script>

	<div style="text-align:center;">
</div>

    <script src="../assets/js/jquery.min.js"></script>
    <script src="../assets/js/skel.min.js"></script>
    <script src="../assets/js/util.js"></script>
    <!--[if lte IE 8]>
    <script src="../assets/js/ie/respond.min.js"></script><![endif]-->
    <script src="../assets/js/main.js"></script>
    <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=klz65vk0y73Q09NKmiiOhqwGmIAsLiVl"></script>
</body>
<script>

    var cityName = "";

    //百度api 通过ip定位
    var myCity = new BMap.LocalCity();
    myCity.get(myFun);
    function myFun(result) {
        cityName = result.name;
        $("#position").append(cityName);
        // alert("IP 定位城市:" + cityName+"   经度"+result.center.lng+"   纬度"+result.center.lat);
    }

    function login2() {
        var username = document.getElementsByName("username")[0].value;
        var password = document.getElementsByName("password")[0].value;
        if(username == null || username == "" || password == null || password == ""){
            alert("账户和密码不能为空！");
            return;
        }
        $.ajax({
            timeout: 500,
            type:"POST",
            async: false,
            url:"/api/user/login",
            data:{"password":password,"username":username,"position":cityName},
            dataType: "json",
            success: function (data) {
                if (data.code == 200){
                    window.location.href = "/templates/main.html";
                }else {
                    alert(data.data)
                }
            }
        })
    }

    function register() {
        var form={};
        var username = document.getElementsByName("username2")[0].value;
        var name = document.getElementsByName("name")[0].value;
        var password = document.getElementsByName("password2")[0].value;
        var phone = document.getElementsByName("phone")[0].value;
        var email = document.getElementsByName("email")[0].value;
        var vscode = $("#vscode").val();
        form["username"]=username;
        form["password"]=password;
        form["phone"]=phone;
        form["email"]=email;
        form["vscode"]=vscode;
        form["name"]=name;
        if(username == null || username == "" || password == null || password == ""){
            alert("账户和密码不能为空！");
            return;
        }
        $.ajax({
            type:"POST",
            url:"/api/user/register",
            async: false,
            // data:{"password":password,"username":username,"phone":phone,"email":email},
            data:JSON.stringify(form),
            contentType: "application/json",
            dateType: "json",
            success: function (data) {
                if (data.code == 200){
                    alert("注册成功！")
                    window.location.href = "/templates/login.html";
                }else {
                    alert(data.data)
                }
            }
        })
    }

    function getCode() {
        var phone = $("#recipient-name").val();
        var username = $("#username").val();
        if(phone == null || phone == "" ){
            alert("手机号不能为空！");
            return;
        }
        if(username == null || username == "" ){
            alert("用户名不能为空！");
            return;
        }
        form["username"] = username;
        form["phone"] = phone;
        $.ajax({
            type:"POST",
            url:"/api/user/sendCode",
            async: false,
            data:JSON.stringify(form),
            contentType: "application/json",
            dateType: "json",
            success: function (data) {
                alert(data.data)
            },
            error: function (data) {
                alert(data.data)
            }
        })
    }

    function getCode2() {
        var phone = $("#phone2").val();
        if(phone == null || phone == "" ){
            alert("手机号不能为空！");
            return;
        }
        $.ajax({
            type:"POST",
            async: false,
            url:"/api/user/sendCode",
            data:{phone:phone},
            success: function (data) {
                alert(data.data)
            }
        })
    }

    function findPwd() {
        var code = $("#code").val();
        if(code == null || code == "" ){
            alert("验证码不能为空！");
            return;
        }
        form["code"] = code;
        $.ajax({
            type:"POST",
            async: false,
            url:"/api/user/findPwd",
            data:JSON.stringify(form),
            contentType: "application/json",
            dateType: "json",
            success: function (data) {
                alert(data.data)
            }
        })
    }

    document.onkeydown = function (event) {
        if (event && event.keyCode == 13) { // enter 键
            //输入自己要执行的代码 或者是调用的方法
            login2()
        }
    }

</script>

</html>
